import React from "react";
import styles from "../css/Index.module.css";
import { Link, NavLink } from "react-router-dom"; //跳转方法
import { useNavigate } from "react-router-dom";
import { Button, Input, Form, Toast } from "react-vant"; //引入表单弹窗
import "react-vant/es/styles";
import axios from "axios";

export default function Index() {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const onFinish = (values) => {
    const params = {
      tel: values.phone,
      password: values.password,
    };
    axios.post("/mobile/login", params).then(
      (res) => {
        if (res.data.code == 1) {
          console.log(res.data.data);
          sessionStorage.setItem("user", JSON.stringify(res.data.data));
          sessionStorage.setItem("token", JSON.stringify(res.data.data.token));
          navigate("/home");
        }
      },
      (error) => {
        console.log(error);
      }
    );
  };

  return (
    <div className={styles.body}>
      <h2 className={styles.title}>登录</h2>
      <Form
        className={styles.form_box}
        form={form}
        onFinish={onFinish}
        footer={
          <div className={styles.submit_btn}>
            <Button
              style={{
                backgroundColor: "#E0AF75", // 背景色
                borderColor: "#E0AF75", // 边框色
                color: "white",
              }}
              round
              nativeType="submit"
              type="primary"
              block
            >
              提交
            </Button>
            <p>没有账号,去注册</p>
          </div>
        }
      >
        <Form.Item
          className={styles.formInput}
          name="phone"
          rules={[
            { required: true, message: "请输入账号" },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: "请输入正确的手机号码",
            },
          ]}
        >
          <Input placeholder="请输入手机号/用户名/邮箱" />
        </Form.Item>
        <Form.Item
          className={styles.formInput}
          name="password"
          rules={[{ required: true, message: "请填写密码" }]}
        >
          <Input type="password" placeholder="请输入密码" />
        </Form.Item>
        <div className={styles.login_text}>
          <p>忘记密码</p>
          <p>免密码登录</p>
        </div>
      </Form>
      <div className={styles.bottom_box}>
        <p>第三方账号登录</p>
        <Link to="/home">
          <div className={styles.img}></div>
        </Link>
        <p>登录及同意《用户服务协议》</p>
      </div>
    </div>
  );
}
